<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="500px" style="margin-left: 40px;margin-top: 50px;">
        <span>角色:</span>
        <div style="border: 1px solid #ccc;width: 400px;">
            <el-tree
                ref="treeRef"
                style="max-width: 300px;margin-left: 50px;"
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                @node-Click="nodeClick"
            />
        </div>
      </el-aside>
      <el-aside width="500px" style="margin-left: 40px;margin-top: 50px;">
        权限菜单:
        <div style="border: 1px solid #ccc;width: 400px;">
            <el-tree
                style="max-width: 400px;margin-left: 50px;"
                :data="datamenu"
                show-checkbox
                node-key="id"
                :props="defaultPropsmenu"
                ref="treeRefmenu"
            />
        </div>
      </el-aside>
    </el-container>
  </div>

  <el-button type="primary" style="margin-left: 850px;margin-top: 50px;" @click="createrolemenu">保存</el-button>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { type FilterNodeMethodFunction,type ElTree, type TreeInstance, ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router=useRouter();
import httpr from '@/axioslan/axioshttp'
import httpw from '@/axioslan/axioshttps'
onMounted(()=>
{
    getroletree();
    getmenu();
})

const defaultProps = {
  id: 'id',
  label: 'roleName',
}

interface Tree {
  [key: string]: any
}
const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const data=ref([])
const getroletree=()=>
{
    httpr
    ({
        url:'/api/Role/GetRole',
        method:'get'
    })
    .then(res=>{
        data.value=res.data.data;
    })
}


//树型用户
const defaultPropsmenu = {
  label: 'menuName',
  id:'id'
}

//InstanceType:获取组件的实例类型
//通过ref引用ElTree的实例们可以通过treeRef.value类获取实例
const treeRefmenu=ref<InstanceType<typeof ElTree>>();

const datamenu=ref([])

const getmenu=()=>
{
    httpr
    ({
        url:'/api/Menu/GetMenuSelect',
        method:'get'
    })
    .then(res=>{
        datamenu.value=res.data.data;
    })
}


//树形控件节点点击事件
const nodeClick=(x:any)=>
{
  query.roleId=x.id;
  FanTianMenuIdByRoleId(x.id);
}

const query:any=reactive
({
  menuId:[],
  roleId:''
})


const createrolemenu=()=>
{
  
   query.menuId=treeRefmenu.value?.getCheckedKeys(false);
  httpw
      ({
        url:'/api/Menu/CreateRoleMenu',
        method:'post',
        data:query
      })
      .then(res=>{
        
        if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            getroletree();
            getmenu();
            return;
        }
        else
        {
            ElMessage.error(res.data.msg);

        }
      })
}


const FanTianMenuIdByRoleId=(id:any)=>
{
  httpr
      ({
        url:'/api/Menu/FanTianMenuIdByRoleId',
        method:'get',
        params:
        {
           roleId:id
        }
      })
      .then(res=>{
        query.menuId=res.data.data.map((item:any)=>item.menuId)
        treeRefmenu.value?.setCheckedKeys(query.menuId,true);

      })
}


</script>